<template>
  <view
    class="custom-nav"
    :style="{ height: navHeight, paddingTop: statusBarHeight }"
  >
    <view class="featureBox" v-if="arrow" @click="goBack">
      <image src="/static/back.png" mode="widthFix" />
    </view>
    <view class="title">
      <slot></slot>
    </view>
    <view class="featureBox" v-if="arrow"></view>
  </view>
</template>

<script>
export default {
  name: "CustomNav",
  props: ["arrow"],
  data() {
    return {
      navHeight: "",
      statusBarHeight: "",
    };
  },
  created() {
    // #ifdef MP-WEIXIN
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = `${systemInfo.statusBarHeight}px`; // 状态栏高度

    // 获取胶囊按钮信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 计算导航栏高度（胶囊底部 + 10px）
    this.navHeight = `${menuButtonInfo.height + 10}px`;
    // #endif
  },
  methods: {
    goBack() {
      uni.navigateBack(); // 返回上一页
    },
  },
};
</script>

<style lang="scss">
.custom-nav {
  padding: 24rpx 0;
  display: flex;
  align-items: center;
  .title {
    margin: 0 auto;
  }
}
.featureBox {
  width: 44rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  image {
    width: 100%;
  }
}
</style>
